<template>
    <a-modal :visible="visible" :footer="false" hide-title>
        <div class="flex flex-col items-center my-4">
            <a-form :model="loginForm" layout="vertical">
                <a-form-item label="用户名">
                    <a-input v-model="loginForm.username" />
                </a-form-item>
                <a-form-item label="密码">
                    <a-input-password v-model="loginForm.password" />
                </a-form-item>
            </a-form>

            <a-button class="btn" shape="round" @click="onLogin">登录</a-button>
        </div>
    </a-modal>
</template>

<script setup lang="ts">
import message from '@/utils/message'
import { ref } from 'vue'

const visible = ref(false)

const loginForm = ref({
    username: null,
    password: null
})

// 登录
const onLogin = () => {
    message.success('登录成功')
    visible.value = false
}

// 打开对话框
const open = () => {
    visible.value = true
}

defineExpose({
    open
})
</script>

<style scoped>
.btn {
    padding: 0.6em 2em;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.btn:before {
    content: "";
    background: linear-gradient(45deg,
            #ff0000,
            #ff7300,
            #fffb00,
            #48ff00,
            #00ffd5,
            #002bff,
            #7a00ff,
            #ff00c8,
            #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-btn 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

@keyframes glowing-btn {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.btn:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
}
</style>